<template>
  <div class="ArticleDetails clearfix">
    <!--这里很尴尬-->
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <div class="col-md-8 article-body">
      <h3>{{article.title}} </h3>
      <div class="article-note">
        <span>阅读量({{article.read}})</span>
        <span>作者： {{article.autor}}</span>
        <span>分类：{{article.type | articleType}}</span> 
      </div>
      <div class="article-time clearfix"> 
        <span class="time-box">-- {{article.time | date}}</span>
      </div>
      <div class="article-content" v-html="article.content"> </div>
      <div class="handle clearfix">
        <div class="good-or-bad pull-left">
          <span class="text-muted">文章怎么样？</span>
          <span class="good-area">
            <img @click="setStatus('good')" src="../assets/good.png" alt=""> 
            ({{article.good}})
          </span>
          <span class="bad-area">
            <img @click="setStatus('bad')" src="../assets/bad.png" alt=""> 
            ({{article.bad}})
          </span>
          <span class="collect">
            <button @click="setStatus('collected')" id="smallBtn" class="btn btn-default">收藏</button> 
            ({{article.collected}}) 
          </span>
        </div>
      </div>
      <div class="article-comment">
        <div v-for="(item, index) in article.comment" class="article-commet-item" >
          <p>
            <a href="#">{{item.handler}} </a> 回复 
            <a href="#">{{item.targeter}}</a> :
          </p>
          <p class="color999">{{item.time | date}}</p>
          <p class="block-area"> {{item.content}}</p>
          <button @click="replyNow($event,index)" class="btn btn-default btn-sm">回复</button>
          <div class="reply-area clearfix" v-show="item.reply">
            <div>
              <textarea name="" v-model="commentInfo.content" id="" cols="60" rows="5"></textarea>
            </div>
            <button class="btn btn-primary btn-sm " @click="replyComment($event, item)">提交评论</button>　
            <button class="btn btn-default" @click="item.reply = false">取消</button>
          </div>

        </div>
      </div>
      <div class="article-comment-box">
        <h4 class="text-primary">评论此文章</h4>
        <div class="col md-10">
          <textarea name="" id="" cols="30" rows="5" v-model="commentInfo.mainContent" class="form-control">
          </textarea>
        </div>
        <p style="margin-top: 10px;">
          <button class="btn btn-primary btn-sm" @click="replyComment">评论</button>
        </p>
      </div>
    </div>
    <div class="col-md-4">

      <!--作者其他作品-->
      <div class="elseArticles">
        <div class="title">作者其他作品</div>
        <div class="text-muted" v-show="!elseArticles.length">无</div>
        <ul class="ul">
          <li v-for="item in elseArticles">
            <router-link :to="'/article/' + item._id" >{{item.title}} </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style>
  
  .ArticleDetails {
    padding: 20px 0;
  }
  .article-body h3{
    text-align: center;
  }
  .article-note{
    color: #999;
    text-align: center;
    margin: 10px 0;
  }
  .article-note span{
    padding: 0 10px;
  }
  .article-time{
    color: #666;
  }
  .ArticleDetails .side-nav {
    padding: 10px;
  }
  .ArticleDetails .better-list, .ArticleDetails .recommend {
    padding: 10px 0;
    border-bottom: 1px solid #d8dfea;
  }
  .ArticleDetails .time-box {
    float: right;
  }
  .ArticleDetails .article-content {
    padding: 10px 0;
    min-height: 400px;
  }
  .ArticleDetails .good-area, .ArticleDetails .bad-area, #smallBtn {
    margin-left: 10px;
    cursor: pointer;
  }
  #smallBtn {
    font-size: 12px;
    padding: 4px 6px;
  }
  .ArticleDetails .handle {
    padding-bottom: 10px;
    border-bottom: 1px solid #d8dfea;
  }
  .ArticleDetails .article-comment {
    padding-bottom: 10px;
  }
  .ArticleDetails .article-comment p{
    margin: 5px 0;
  }
  .ArticleDetails .article-commet-item {
    padding: 10px 0;
    border-bottom: 1px solid #d8dfea;
  }
  .ArticleDetails .reply-area {
    margin: 10px 0;
  }
  .main h4.text-primary{
    margin-bottom: 10px;
  }
  .article-content > p{
    margin-top: 8px;
    line-height: 16px;
  }
  ul.ul {
    list-style-type: circle;
  }
  .ul li {
    margin-top: 10px;
  }
  .color999 {
    color: #999;
  }
  .block-area {
    border-left: 10px #0099CC solid;
    margin: 10px 0;
    padding: 20px;
    box-shadow: 2px 2px 2px #E1F2FA;
  }

</style>

<script>
  export default {
    data () {
      return {
        article: {
          
        },
        commentInfo: {
          handler: '',
          targeter: '',
          content: '',
          time: null,
          mainContent: '',
          reply: false
        },
        elseArticles: []
      }
    },
    computed: {
      loginer () {
        return this.$store.state.userInfo && this.$store.state.userInfo.user
      }
    },
    props: ['rootPath'],
    mounted () {
      var id = this.$route.params.id
      this.$http.get(this.rootPath + '/article/id?articleId=' + id).then((res) => {
        var oRes = res.data
        this.article = oRes.currArt
        //  给每个评论添加个属性
        var comment = this.article.comment
        for (var i = 0; i < comment.length; i++) {
          var target = {}
          for (var key in comment[i]) {
            target[key] = comment[i][key]
          }
          target.reply = false
          this.$set(comment, i, target)
        }
        this.elseArticles = oRes.elseArticles
        if (this.article.autor !== this.loginer) {
          this.$http.post(this.rootPath + '/updateArticle/read', {articleId: id}).then((res) => {
            //  阅读量+1
            this.article.read++
          })
        }
      })
    },
    watch: {
      '$route': function (to, from) {
        var id = this.$route.params.id
        this.$http.get(this.rootPath + '/article/id?articleId=' + id).then((res) => {
          this.article = res.data.currArt
          if (this.article.autor !== this.loginer) {
            this.$http.post(this.rootPath + '/updateArticle/read', {articleId: id}).then((res) => {
              //  阅读量+1
              this.article.read++
            })
          }
        })
      }
    },
    methods: {
      //  发送回复
      replyComment (ev, com) {
        var newCom = this.commentInfo
        newCom.handler = this.loginer
        if (!newCom.handler) {
          return window.alert('请先登录！')
        }
        if (this.loginer === this.article.autor) {
          return window.alert('文章作者不能进行该操作！')
        }
        if (!newCom.content && !newCom.mainContent) {
          return window.alert('请输入内容')
        }
        if (!com) {
          newCom.targeter = '楼主'
          newCom.content = newCom.mainContent
        } else {
          newCom.targeter = com.handler
        }
        newCom.time = Date.now()
        this.$http.post(this.rootPath + '/updateArticle/comment', {articleId: this.article._id, comment: newCom})
          .then((res) => {
            if (res.data === '1') {
              this.article.comment.push({
                handler: newCom.handler,
                targeter: newCom.targeter,
                content: newCom.content,
                time: newCom.time,
                reply: false
              })
              this.initCommentInfo()
              if (com) {
                com.reply = false
              }
            }
          })
      },
      //  重置回复内容
      initCommentInfo () {
        this.commentInfo.content = this.commentInfo.mainContent = ''
      },
      //  回复按钮事件
      replyNow (ev, index) {
        var comment = this.article.comment
        for (var i = 0; i < comment.length; i++) {
          comment[i].reply = false
        }
        comment[index].reply = true
        this.initCommentInfo()
      },
      setStatus (key) {
        if (!this.loginer) {
          return window.alert('请登录')
        }
        if (this.loginer === this.article.autor) {
          return window.alert('文章作者不能进行该操作！')
        }
        var param = {articleId: this.article._id, handleId: this.loginer}
        this.$http.post(this.rootPath + '/updateArticle/' + key, param).then((res) => {
          if (res.data === '0') {
            window.alert('只能进行一次操作！')
            return
          }
          this.article[key]++
        })
      }
    }
  }
</script>